//
// Project Kimchi
//
// Copyright IBM Corp, 2015-2016
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

/* Add Template Modal Window */


$kimchi-icon-path: '../images';

.templates-modal {
    .modal-dialog {
        width: 1100px;
    }
    .page-list {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow: hidden;
    }
    .page {
        position: absolute;
        left: 100%;
        width: 100%;
        height: 100%;
        overflow: auto;
        padding: 10px 30px;
    }
}

#template-edit-window {
    .wok-mask {
        top: 0 !important;
        z-index: 3;
    }
    .tab-content .tab-pane {
        position: relative;
    }
    form {
        margin: 15px 0 0;
    }
    label.check-all {
        margin: 0 !important;
        padding: 0 !important;
        width: 100px;
        display: inline-block;
        vertical-align: middle;
    }
    .hide {
        display: none;
    }
    .form-template-inline-wrapper {
        display: inline-block;
        vertical-align: top;
    }
    .template-edit-wrapper-label {
        vertical-align: top;
        min-width: 172px;
        height: 35px;
        line-height: 35px;
        margin: 7px 0 8px;
    }
    .template-edit-wrapper-controls {
        vertical-align: top;
        width: 480px;
        height: 35px;
        line-height: 35px;
        margin: 7px 0 8px;
    }
    .template-tab-header {
        background: $table-bg;
        display: block;
        border-bottom: 1px solid $table-border-color;
        > span {
            padding: $table-cell-padding;
            display: inline-block;
            font-family: $font-family-light;
            font-weight: 400;
            font-size: 12.5pt;
            vertical-align: baseline;
            border-bottom: none;
            border-top: 0;
            line-height: 42px;
            height: 42px;
        }
    }
    .template-tab-body {
        .item {
            border-top: 1px solid $table-border-color;
            height: 53px;
            &:first-child {
                border-top: 0;
            }
            &:nth-child(even) {
                background-color: $table-bg-accent;
            }
            &:nth-child(odd) {
                background-color: $table-bg;
            }
            > span {
                padding: $table-cell-padding;
                display: inline-block;
                vertical-align: middle;
                input[type="text"].form-control {
                    height: 40px;
                }
            }
        }
    }
    #template-edit-memory-textbox {
        width: 308px !important;
        display: inline;
    }
    #guest-show-max-processor {
        display: inline-block;
    }
    #guest-processor label {
        display: block;
    }
    #guest-max-processor-panel label {
        display: block;
    }
    #guest-max-processor-panel .form-control,
    #guest-processor .form-control {
        display: inline-block;
        width: 184px;
    }
    .manual {
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .topology {
        display: none;
        margin: 0 24px;
    }
    .topology label {
        display: block;
    }
    .bootstrap-select .btrn .caret {
        height: selectpicker height - 2px;
    }
    .template-storage-cell.storage-pool {
        width: 180px !important;
    }
    .template-storage-cell.storage {
        width: 180px !important;
    }
    .template-storage-cell.storage-path {
        width: 180px !important;
    }
    .template-storage-cell.source {
        width: 180px !important;
    }
    .template-storage-cell.type {
        width: 110px;
    }
    .template-storage-cell.disk {
        width: 133px;
    }
    .template-storage-cell.format {
        width: 162px;
    }
    .template-interface-cell.network {
        width: 220px;
    }
    .template-interface-cell.type {
        width: 250px;
    }
}

#template-add-window {
    .modal-body {
        margin: 0;
        padding: 0;
    }
    .modal-footer {
        margin-top: 0;
    }
    .modal-footer .btn + .btn {
        margin-left: 0;
    }
    .modal-footer .btn {
        margin-right: 5px;
    }
    .template-modal-container {
        padding: 10px 30px;
        position: relative;
    }
    .template-pager {
        background: $table-border-color;
        width: 1082px;
        height: 689px;
        position: relative;
        overflow: hidden;
    }
    .template-pager-container {
        position: absolute;
        height: 664px;
        width: 2164px;
        left: 0;
        transition: left .2s ease-in-out;
    }
    &.modal-content p {
        margin: 0;
    }
    &.modal-content h5 {
        font-size: 13pt;
        font-weight: 400;
        margin-top: 0;
    }
    &.modal-content label {
        font-size: 16px;
        font-weight: 400;
        font-family: $font-family-sans-serif;
    }
    &.modal-content label.check-all {
        display: inline-block;
        vertical-align: middle;
        padding-top: 8px;
    }
    &.modal-content button#iso-more,
    &.modal-content button#iso-more-loading {
        clear: both;
    }
    &.modal-content div#iso-remote-box {
        left: 1082px;
    }
    &.modal-content div#iso-local-box {
        left: 0;
    }
    .check-all {
        margin-right: 0 !important;
        padding-left: 0 !important;
    }
    .filter {
        float: right;
        height: 40px;
        overflow: visible;
        clear: both;
        margin-bottom: 0;
        display: inline-block;
        vertical-align: middle;
    }
    .pull-right .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
        width: 133px;
    }
    .filter input[type="text"].form-control {
        width: 460px;
        height: 40px;
        float: right;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .filter .bootstrap-select.btn-group .btn .caret {
        border-left: 0;
    }
    .filter button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        background: $table-bg-accent;
        border-right: 0;
    }
    span.iso-image-indicator {
        position: absolute;
        bottom: 10px;
        right: 10px;
        font-size: 32px;
        .fa {
            display: inline-block;
            vertical-align: middle;
        }
        i.fa.fa-file-iso,
        i.fa.fa-file-img {
            display: inline-block;
            width: 27px;
            height: 25px;
            margin-right: 3px;

        }
        i.fa.fa-file-iso {
            background: url('#{$kimchi-icon-path}/file-o-iso.svg') no-repeat 50% 50%;
            background-size: contain;
        }
        i.fa.fa-file-img {
            background: url('#{$kimchi-icon-path}/file-o-img.svg') no-repeat 50% 50%;
            background-size: contain;
        }
    }
    span.iso-image-alert {
        position: absolute;
        bottom: 15px;
        right: 70px;
        font-size: 20px;
    }
    .tooltip-arrow {
        display: none;
    }
    #loading-isos {
        top: 0 !important;
        z-index: 4 !important;
    }
}


/* VM List View classes*/

#templatestatusselect{
      width: 240px !important;
}

#templates-root-container {
    .grid-control input[type="text"] {
        height: 38px;
        display: inline-block;
        vertical-align: top;
    }
    .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
        width: 162px;
        margin-right: 10px;
    }
    .bootstrap-select.btn-group .dropdown-menu {
        margin: 0px;
        > li > a {
            border-top: 1px solid $table-bg;
            border-bottom: 1px solid $table-border-color;
            height: 38px;
            padding: 4px 12px;
            font-family: $font-family-light;
            font-size: 13pt;
        }
        > li:last-child > a {
            border-bottom: 0;
        }
    }
    .control.open > .dropdown-menu {
        display: block;
        display: block;
        width: 188px;
        margin-left: -26px;
        border-radius: 0;
    }
    .control.open .caret {
        background: #3a393b;
    }
    .control.open .caret:before {
        content: '\f077';
    }
    .control.open > a {
        outline: 0;
    }
    .sort-button {
        height: 38px;
        padding: 4px 12px;
        .caret {
            height: 36px;
        }
        .caret:before {
            top: 6px;
        }
    }
    .wok-vm-list {
        display: block;
        width: 100%;
        list-style-type: none;
        margin: 0;
        padding-left: 0;
        background: $table-bg;
        .wok-vm-header {
            border-bottom: 1px solid $table-first-row-border-color;
            > span {
                padding: $table-cell-padding;
                display: inline-block;
                vertical-align: bottom;
                height: 36px;
                font-family: $font-family-light;
                font-weight: 300;
                font-size: 12.5pt;
                line-height: $line-height-base;
                border-bottom: none;
                border-top: 0;
                background-color: $table-bg;
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .wok-vm-body {
            clear: both;
            border-top: 1px solid $table-border-color;
            &:first-child {
                border-top: 0;
            }
            > span {
                padding: $table-cell-padding;
                display: inline-block;
                vertical-align: top;
                font-family: $font-family-sans-serif;
                font-size: 12.5pt;
                line-height: (1 + $line-height-base);
                font-weight: 400;
                width: 200px;
            }
            .column-type {
                padding-left: 40px !important;
            }
        }
        .ul-body {
            display: block;
            width: 100%;
            clear: both;
            padding: 0;
            margin: 0;
            list-style: none;
            > li:nth-child(even) {
                background-color: $table-bg-accent;
            }
            > li:nth-child(odd) {
                background-color: $table-bg;
            }
        }
        .column-name {
            width: 17.4900%;
            font-weight: bold;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .column-type {
            width: 14.2435%;
            font-weight: bold;
        }
        .column-version {
            width: 12.2435%;
            font-weight: bold;
        }
        .column-processors {
            width: 10.8413%;
        }
        .column-memory {
            width: 9.6900%;
        }
        .column-status {
            width: 1.6900%;
        }
        .column-action {
            width: 232px;
        }
        .item-hidden {
            display: none !important;
        }
        .distro-icon {
            background-color: transparent;
            background-size: 27px 27px;
            background-repeat: no-repeat;
            background-position: 8px 50%;
            &.icon-centos {
                background-image: url('../images/icon-centos.png');
            }
            &.icon-debian {
                background-image: url('../images/icon-debian.png');
            }
            &.icon-fedora {
                background-image: url('../images/icon-fedora.png');
            }
            &.icon-opensuse {
                background-image: url('../images/icon-opensuse.png');
            }
            &.icon-sles {
                background-image: url('../images/icon-sles.png');
            }
            &.icon-ubuntu {
                background-image: url('../images/icon-ubuntu.png');
            }
            &.icon-gentoo {
                background-image: url('../images/icon-gentoo.png');
            }
            &.icon-unknown {
                background-image: url('../images/icon-vm.png');
            }
        }
    }
    .wok-vm-gallery {
        display: block;
        width: 100%;
        list-style-type: none;
        margin: 0;
        padding-left: 5px;
        .wok-vm-header {
            display: none;
        }
        .wok-vm-body {
            position: relative;
            ;
            padding: 0 20px 0 20px;
            width: 240px;
            display: inline-block;
            border: 0;
            background: $body-bg;
            margin-right: 20px;
            margin-bottom: 20px;
            > span {
                display: inline-block;
                width: 100%;
                font-family: $font-family-sans-serif;
                font-size: 12.5pt;
                line-height: $line-height-base;
                font-weight: 400;
            }
        }
        .ul-body {
            display: inline-block;
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .column-name {
            line-height: 2.5 !important;
            font-size: 15.3pt !important;
            font-weight: 500 !important;
            text-overflow: ellipsis !important;
            overflow: hidden !important;
            padding-right: 35px !important;
            white-space: nowrap;
            cursor: default;
        }
        span.template-status {
            position: absolute;
            bottom: 10px;
            right: 10px;
            width: 32px;
            height: 32px;
        }
        .invalid-icon {
            position: absolute;
            font-size: 32px;
        }
        .item-hidden {
            &.column-type,
            &.column-version,
            &.column-processors {
                padding-bottom: 11px;
            }
        }
        .item-hidden {
            &.column-memory {
                padding-bottom: 38px;
            }
        }
        .font-bold {
            font-weight: bold !important;
        }
        .pull-right {
            float: none !important;
            padding-bottom: 22px;
        }
        .dropdown-menu {
            width: 100%;
        }
        .menu-flat {
            width: 240px;
            margin-left: -20px;
        }
        .btn {
            width: 100%;
            text-align: left;
            padding-left: 42px;
            border-radius: 0;
        }
        .name-distro-icon {
            background-color: transparent;
            background-size: 32px 32px;
            background-repeat: no-repeat;
            background-position: 100% 50%;
            &.icon-centos {
                background-image: url('../images/icon-centos.png');
            }
            &.icon-debian {
                background-image: url('../images/icon-debian.png');
            }
            &.icon-fedora {
                background-image: url('../images/icon-fedora.png');
            }
            &.icon-opensuse {
                background-image: url('../images/icon-opensuse.png');
            }
            &.icon-sles {
                background-image: url('../images/icon-sles.png');
            }
            &.icon-ubuntu {
                background-image: url('../images/icon-ubuntu.png');
            }
            &.icon-gentoo {
                background-image: url('../images/icon-gentoo.png');
            }
            &.icon-unknown {
                background-image: url('../images/icon-vm.png');
            }
        }
    }
    span.template-status {
        color: #999;
    }
    .tooltip-inner {
        font-size: 10pt;
        padding: 6px 8px;
    }
    .wok-vm-list .tooltip-inner {
        max-width: 300px;
    }
    .wok-vm-list .tooltip[style] {
        left: 79px !important;
    }
    .wok-vm-list .tooltip-arrow[style] {
        left: 10px !important;
    }
    .wok-vm-gallery .tooltip-inner {
        max-width: 320px;
    }
    .wok-vm-gallery .tooltip[style] {
        left: 7px !important;
        right: 7px !important;
    }
    .wok-vm-gallery .tooltip-arrow[style] {
        left: 207px !important;
    }
}
